import React, { Component } from 'react';
import styled from 'styled-components/native';
import { EvilIcons } from '@expo/vector-icons';

import { colors, strings } from '../../utils/constants';

const Root = styled.View`
  width: 100%;
  height: 48;
  paddingLeft: 10;
  paddingRight: 10;
  paddingTop: 10;
  paddingBottom: 10;
  backgroundColor: ${colors.SEARCH_VIEW_GRAY};
`;

const TextInputContent = styled.View`
  flexDirection: row;
  width: 100%;
  height: 100%;
  backgroundColor: ${colors.WHITE};
  borderRadius: 4;
  paddingLeft: 8;
  paddingRight: 8;
  alignItems: center;
  justifyContent: flex-start;
`;

const SearchIcon = styled(EvilIcons) `
  color: ${colors.PRIMARY_TEXT_LITE};
  fontSize: 22;
  marginTop: 2;
`;

const TextInput = styled.TextInput.attrs({
  placeholderTextColor: `${colors.PRIMARY_TEXT_LITE}`,
  underlineColorAndroid: 'transparent'
})`
  flex: 1;
  fontSize: 14;
  paddingRight: 8;
  marginLeft: 4;
`;

class SearchView extends Component {
  render() {
    return (
      <Root>
        <TextInputContent>
          <SearchIcon size={22} name="search" />
          <TextInput placeholder={strings.SEARCH_HINT} />
        </TextInputContent>
      </Root>
    );
  }
}

export default SearchView;
